<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>数码管时钟</title>
    <style type="text/css">
        .ledback{
            background:url("./imgs/LED.png") 0px 0px no-repeat;
            background-size:100% 100%;
            width:740px;
            height:300px;
            margin:auto;
        }
        .top1{
            width:100%;
            height:15%;
            /* background-color:red; */
            opacity:0.6;
        }
        /* 时间样式=========================================================== */
        .timediv{
            width:100%;
            height:38%;
            /* background-color:green; */
            /* opacity:0.6; */
            text-align:center;
        }
        /* 选择timediv下div，一个数组，后代选择器，父亲下儿子们这一代，不包括孙子 */
        .timediv>div{
            display:inline-block;
            transform:skewX(-10deg);/* 设置倾斜 */
        }
        /* 冒号的样式 选择timediv下的div，第三个div和第六个div */
        .timediv>div:nth-of-type(3),.timediv>div:nth-of-type(6){
            width:20px;
            height:100px;
            background:url("./imgs/dot.png") -52px -13px no-repeat;
        }
        /* 时间的数字 */
        .timenum{
            width:50px;
            height:100px;
            background:url("./imgs/countdown8.png") -38px -13px no-repeat;
        }
        /* 日期样式=========================================================== */
        .datediv{
            width:100%;
            height:36%;
            /* background-color:blue; */
            /* opacity:0.6; */
            text-align:center;
        }
        .datediv>div{
            display:inline-block;
            transform:skewX(-10deg);
            font-size:50px;
            vertical-align:middle;
            color:white;
        }
        .datenum{
            width:39px;
            height:73px;
            background:url("./imgs/countdown8.png") -27px -2px no-repeat;
            background-size:241% 118%;
        }
    </style>
    <script src="./js/jquery-3.4.1.slim.min.js"></script>
    <script type="text/javascript">

        // $(document).ready(function(){
        // });
        // 文档准备好以后的操作
        $(function(){

        });

        // 一次修改两张图片
        function change2img(timeVal,className,idx0,idx1){
            var val0 = timeVal % 10;
            var val1 = Math.floor(timeVal / 10);
            // 设置个位的图片
            $(className).eq(idx0).css({
                "background-image":'url("./imgs/countdown'+val0+'.png")'
            });
            // 设置十位的图片
            $(className).eq(idx1).css({
                "background-image":'url("./imgs/countdown'+val1+'.png")'
            });
        }

        // 每秒钟数据的变化
        function change(){
            // 拿到当前时间
            var now = new Date();
            // 秒、分、小时、月份、几号
            change2img(now.getSeconds(),".timenum",5,4);
            change2img(now.getMinutes(),".timenum",3,2);
            change2img(now.getHours(),".timenum",1,0);
            change2img(now.getMonth()+1,".datenum",5,4);
            change2img(now.getDate(),".datenum",7,6);
            
            // 星期
            var day0 = now.getDay(); // 1-6 0=日
            if(day0 == 0){
                day0 = 7;
            }
            // 设置个位的图片
            $(".datenum").eq(8).css({
                "background-image":'url("./imgs/countdown'+day0+'.png")'
            });

            // 年份
            var year = now.getFullYear();
            var year0 = year % 10;
            var year1 = Math.floor((year / 10) % 10); //2019/10=201.9  向下取整201  201%10=1
            var year2 = Math.floor((year / 100) % 10);
            var year3 = Math.floor(year / 1000);
            // 设置个位的图片
            $(".datenum").eq(3).css({
                "background-image":'url("./imgs/countdown'+year0+'.png")'
            });
            $(".datenum").eq(2).css({
                "background-image":'url("./imgs/countdown'+year1+'.png")'
            });
            $(".datenum").eq(1).css({
                "background-image":'url("./imgs/countdown'+year2+'.png")'
            });
            $(".datenum").eq(0).css({
                "background-image":'url("./imgs/countdown'+year3+'.png")'
            });

            // // 拿到秒
            // var second = now.getSeconds();
            // var sec0 = second % 10; // 123456 % 10 = 6
            // var sec1 = Math.floor(second / 10); // 45 / 10 = 4.5 Math.floor() 向下取整，取比较小的数字。
            // // 设置秒的图片
            // $(".timenum").eq(5).css({
            //     "background-image":'url("./imgs/countdown'+sec0+'.png")'
            // });
            // $(".timenum").eq(4).css({
            //     "background-image":'url("./imgs/countdown'+sec1+'.png")'
            // });

            // // 拿到分钟
            // var minute = now.getMinutes();
            // var min0 = minute % 10;
            // var min1 = Math.floor(minute / 10);
            // // 设置分钟的图片
            // $(".timenum").eq(3).css({
            //     "background-image":'url("./imgs/countdown'+min0+'.png")'
            // });
            // $(".timenum").eq(2).css({
            //     "background-image":'url("./imgs/countdown'+min1+'.png")'
            // });

            // // 拿到时钟
            // var hour = now.getHours();
            // var hour0 = hour % 10;
            // var hour1 = Math.floor(hour / 10);
            // // 设置时钟的图片
            // $(".timenum").eq(1).css({
            //     "background-image":'url("./imgs/countdown'+hour0+'.png")'
            // });
            // $(".timenum").eq(0).css({
            //     "background-image":'url("./imgs/countdown'+hour1+'.png")'
            // });

        }
        setInterval("change()",1000);
    </script>
</head>
<body>
    <div class="ledback">
        <!-- 占位DIV -->
        <div class="top1"></div>
        <!-- 时分秒布局 -->
        <div class="timediv">
            <div class="timenum"></div>
            <div class="timenum"></div>
            <div></div>
            <div class="timenum"></div>
            <div class="timenum"></div>
            <div></div>
            <div class="timenum"></div>
            <div class="timenum"></div>
        </div>
        <!-- XXXX年XX月XX日星期X布局 -->
        <div class="datediv">
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">年</div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">月</div>
            <div class="datenum"></div>
            <div class="datenum"></div>
            <div class="">日</div>
            <div class="">星期</div>
            <div class="datenum"></div>
        </div>
    </div>
</body>
</html>